<template>
  <view class="black-white-card-game">
    <!-- 游戏标题 -->
    <view class="game-header">
      <text class="game-title">🎭 黑白卡牌心理博弈</text>
      <text class="game-subtitle">信任与欺骗的终极对决</text>
      <view class="exchange-btn" @click="goToExchange">
        <text class="exchange-icon">💎</text>
        <text class="exchange-text">兑换</text>
      </view>
    </view>

    <!-- 游戏状态栏 -->
    <view class="game-status">
      <view class="round-info">
        <text class="round-text">第{{ currentRound }}轮 / 共{{ maxRounds }}轮</text>
        <text class="phase-text">{{ getPhaseText() }}</text>
              </view>
      <view class="common-pot">
        <text class="pot-label">公共金币池</text>
        <text class="pot-amount">💰 {{ commonPot }}</text>
        <text class="pot-desc">入场费: {{ entryFee }}×2 (玩家+AI)</text>
          </view>
        </view>
        
    <!-- 玩家信息区域 -->
    <view class="players-area">
      <view 
        v-for="player in players" 
        :key="player.id"
        class="player-card"
        :class="{ 'current-player': player.id === currentPlayerId, 'eliminated': player.eliminated }"
      >
        <view class="player-header">
          <image 
            v-if="player.avatar" 
            :src="player.avatar" 
            class="player-avatar" 
            @error="handleAvatarError"
          />
          <view v-else class="player-avatar default-avatar">
            <text class="default-avatar-text">{{ player.name.charAt(0) }}</text>
        </view>
          <text class="player-name">{{ player.name }}</text>
          <text v-if="player.id === currentPlayerId" class="current-indicator">当前</text>
        </view>
        <view class="player-stats">
          <view class="stat-item">
            <text class="stat-icon">💰</text>
            <text class="stat-value">{{ player.gold }}</text>
            <text class="stat-label">金币</text>
              </view>
          <view class="stat-item">
            <text class="stat-icon">⭐</text>
            <text class="stat-value">{{ player.reputation }}</text>
            <text class="stat-label">信誉</text>
              </view>
          <view class="stat-item">
            <text class="stat-icon">🏆</text>
            <text class="stat-value">{{ player.rewards }}</text>
            <text class="stat-label">奖励</text>
            </view>
          </view>
        <view v-if="player.eliminated" class="eliminated-overlay">
          <text class="eliminated-text">已淘汰</text>
          </view>
        </view>
      </view>
      
    <!-- 游戏主区域 -->
    <view class="game-main-area">
      <!-- 出牌阶段 -->
      <view v-if="gamePhase === 'play'" class="play-phase">
        <view class="current-player-info">
          <text class="phase-title">{{ currentPlayer.name }} 的回合</text>
          <text class="hand-count">手牌数量: {{ currentPlayer.hand.length }}</text>
    </view>

        <!-- 手牌区域 -->
        <view class="hand-area">
          <view class="hand-title">选择要出的卡牌</view>
          <view class="cards-container">
            <view 
              v-for="(card, index) in currentPlayer.hand" 
              :key="index"
              class="card-item"
              :class="{ 'selected': selectedCards.includes(index) }"
              @click="selectCard(index)"
            >
              <text class="card-icon">{{ card.icon }}</text>
              <text class="card-name">{{ card.name }}</text>
        </view>
              </view>
            </view>
            
        <!-- 操作按钮 -->
        <view class="action-buttons">
                <button 
            class="action-btn primary" 
            :disabled="selectedCards.length === 0"
            @click="playCards"
          >
            出牌 ({{ selectedCards.length }})
          </button>
          <button class="action-btn secondary" @click="passTurn">
            跳过回合
                </button>
              </view>
            </view>
            
      <!-- 投注阶段 -->
      <view v-if="gamePhase === 'betting'" class="betting-phase">
        <view class="phase-title">投注阶段</view>
        <view class="betting-info">
          <text class="played-cards-text">玩家和AI都已出牌</text>
          <text class="betting-desc">投注奖励：质疑成功+1.5倍，诚实获胜+1.2倍，双方诚实+0.5倍</text>
          </view>
          
        <view class="player-betting">
          <view class="betting-header">
            <text class="player-name">{{ currentPlayer.name }}</text>
            <text class="player-gold">金币: {{ currentPlayer.gold }}</text>
            </view>
            
          <view class="betting-controls">
            <view class="bet-toggle-section">
                <button 
                class="bet-toggle-btn"
                :class="{ 'active': playerBets[currentPlayerId] }"
                @click="toggleBet(currentPlayerId)"
              >
                {{ playerBets[currentPlayerId] ? '已投注' : '投注' }}
                </button>
            </view>
            
            <view v-if="playerBets[currentPlayerId]" class="bet-amount-section">
              <text class="amount-label">投注金额</text>
              <view class="amount-controls">
                <input 
                  type="number" 
                  v-model="betAmounts[currentPlayerId]"
                  :max="currentPlayer.gold"
                  min="1"
                  class="bet-input"
                  placeholder="输入投注金额"
                />
                <button class="bet-max-btn" @click="setMaxBet(currentPlayerId)">最大</button>
              </view>
              <view class="quick-amounts">
            <button 
                  v-for="amount in quickAmounts" 
                  :key="amount"
                  class="quick-amount-btn"
                  @click="setQuickBet(amount)"
                >
                  {{ amount }}
            </button>
          </view>
        </view>
      </view>
    </view>

        <view class="action-buttons">
          <button class="action-btn primary" @click="confirmBetting">
            确认投注
          </button>
          <button class="action-btn secondary" @click="skipBetting">
            跳过投注
          </button>
      </view>
    </view>

      <!-- 技能卡阶段 -->
      <view v-if="gamePhase === 'skill'" class="skill-phase">
        <view class="phase-title">技能卡阶段</view>
        <view class="skill-cards">
          <view 
            v-for="(skill, index) in availableSkills" 
            :key="index"
            class="skill-card"
            @click="useSkill(skill)"
          >
            <text class="skill-icon">{{ skill.icon }}</text>
            <text class="skill-name">{{ skill.name }}</text>
            <text class="skill-desc">{{ skill.description }}</text>
              </view>
              </view>
        <button class="action-btn secondary" @click="skipSkill">
          不使用技能
        </button>
      </view>

      <!-- 质疑阶段 -->
      <view v-if="gamePhase === 'challenge'" class="challenge-phase">
        <view class="phase-title">质疑阶段</view>
        <view class="challenge-info">
          <text class="challenger-text">玩家和AI都已出牌</text>
          <text class="ai-cards-info">AI出牌数量: {{ aiPlayedCards.length }}</text>
      </view>

        <!-- 显示AI出的卡牌（背面） -->
        <view class="opponent-cards">
          <text class="opponent-cards-title">🎭 AI玩家 出的卡牌</text>
          <view class="opponent-cards-container">
          <view 
              v-for="(card, index) in aiPlayedCards" 
              :key="index"
              class="opponent-card"
              :class="{ 'revealed': card.revealed, 'clickable': truthEyeUsed && !truthEyeRevealed }"
              @click="revealCard(index)"
            >
              <text v-if="card.revealed" class="card-icon">{{ card.icon }}</text>
              <text v-else class="card-back">?</text>
              <text class="card-name">{{ card.revealed ? card.name : '未知' }}</text>
          </view>
        </view>
      </view>

        <view class="challenge-options">
          <view class="challenge-option">
            <view class="player-info">
              <text class="player-name">AI玩家</text>
              <text class="player-gold">金币: {{ players[1].gold }}</text>
          </view>
            <view class="challenge-actions">
            <button 
                class="challenge-btn"
                :class="{ 'active': challenges[2] }"
                @click="toggleChallenge(2)"
              >
                {{ challenges[2] ? '已质疑' : '质疑AI' }}
            </button>
          </view>
            </view>
              </view>
          
        <view class="action-buttons">
          <button class="action-btn primary" @click="resolveChallenge">
            结算质疑
          </button>
              </view>
              </view>

      <!-- 结果阶段 -->
      <view v-if="gamePhase === 'result'" class="result-phase">
        <view class="result-title">🎯 回合结果</view>
        
        <view class="result-summary">
          <view class="result-main">
            <text class="result-message">{{ resultMessage }}</text>
          </view>
          
          <view v-if="challengeResult" class="result-detail">
            <text class="detail-text">{{ challengeResult }}</text>
          </view>
          
          <view v-if="reputationChanges" class="result-detail">
            <text class="detail-text">{{ reputationChanges }}</text>
          </view>
        </view>
        
        <view class="result-stats">
          <view class="stat-card">
            <text class="stat-label">公共金币池</text>
            <text class="stat-value">💰 {{ commonPot }}</text>
          </view>
        </view>
        
        <!-- 显示双方出的卡牌 -->
        <view class="played-cards-summary">
          <view class="player-cards-section">
            <text class="cards-section-title">🎭 {{ players[0].name }} 出的卡牌</text>
            <view class="cards-display">
              <view 
                v-for="(card, index) in playedCards" 
                :key="index"
                class="result-card"
              >
                <text class="card-icon">{{ card.icon }}</text>
                <text class="card-name">{{ card.name }}</text>
              </view>
            </view>
          </view>
          
          <view class="ai-cards-section">
            <text class="cards-section-title">🤖 AI玩家 出的卡牌</text>
            <view class="cards-display">
              <view 
                v-for="(card, index) in aiPlayedCards" 
                :key="index"
                class="result-card"
              >
                <text class="card-icon">{{ card.icon }}</text>
                <text class="card-name">{{ card.name }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <button class="action-btn primary" @click="nextRound">
          下一轮
          </button>
        </view>
        
      <!-- 游戏结束 -->
      <view v-if="gamePhase === 'ended'" class="end-phase">
        <view class="end-title">游戏结束</view>
        <view class="final-ranking">
          <text class="ranking-title">最终排名</text>
          <view 
            v-for="(player, index) in finalRanking" 
            :key="player.id"
            class="ranking-item"
          >
            <text class="rank">第{{ index + 1 }}名</text>
            <text class="player-name">{{ player.name }}</text>
            <text class="player-gold">💰 {{ player.gold }}</text>
          </view>
        </view>
        <button class="action-btn primary" @click="restartGame">
          重新开始
          </button>
      </view>
    </view>

    <!-- 已出卡牌显示（仅在非结果阶段显示） -->
    <view v-if="playedCards.length > 0 && gamePhase !== 'result'" class="played-cards">
      <text class="played-cards-title">🎭 已出卡牌</text>
      <view class="played-cards-info">
        <text class="player-label">{{ currentPlayer.name }} 出的卡牌</text>
        </view>
      <view class="played-cards-container">
        <view 
          v-for="(card, index) in playedCards" 
          :key="index"
          class="played-card"
        >
          <text class="card-icon">{{ card.icon }}</text>
          <text class="card-name">{{ card.name }}</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  name: 'BlackWhiteCardGame',
  data() {
    return {
      // 游戏状态
        currentRound: 1,
        maxRounds: 5,
      gamePhase: 'play', // play, betting, skill, challenge, result, ended
      currentPlayerId: 1,
      
      // 玩家数据
      players: [
        {
          id: 1,
          name: '玩家',
          avatar: '',
          gold: 100,
          reputation: 100,
          rewards: 0,
          hand: [],
          eliminated: false
        },
        {
          id: 2,
          name: 'AI玩家',
          avatar: '',
          gold: 1000,
          reputation: 100,
          rewards: 0,
          hand: [],
          eliminated: false
        }
      ],
      
      // 用户信息
      userInfo: {
        name: '',
        avatar: ''
      },
      
      // 卡牌数据
      selectedCards: [],
      playedCards: [], // 玩家出的卡牌
      aiPlayedCards: [], // AI出的卡牌
      opponentHand: [], // 对方手牌
      showOpponentHand: false, // 是否显示对方手牌
      truthEyeUsed: false, // 真相之眼是否已使用
      truthEyeRevealed: false, // 真相之眼是否已翻牌
      
      // 投注数据
      playerBets: {},
      betAmounts: {},
      
      // 质疑数据
      challenges: {},
      
      // 技能卡
      availableSkills: [
        {
          id: 'reveal',
          name: '真相之眼',
          icon: '👁️',
          description: '查看对手手牌',
          cost: 10
        },
        {
          id: 'protect',
          name: '信任护盾',
          icon: '🛡️',
          description: '保护自己不被质疑',
          cost: 15
        },
        {
          id: 'double',
          name: '双倍投注',
          icon: '💰',
          description: '投注金额翻倍',
          cost: 20
        }
      ],
      
      // 游戏结果
      resultMessage: '',
      challengeResult: '',
      reputationChanges: '',
      finalRanking: [],
      
      // 公共金币池
      commonPot: 0,
      entryFee: 20, // 入场费
      
      // 快速投注金额
      quickAmounts: [10, 20, 50, 100],

    }
  },
  
  computed: {
    currentPlayer() {
      return this.players.find(p => p.id === this.currentPlayerId)
    },
    
    otherPlayers() {
      return this.players.filter(p => p.id !== this.currentPlayerId && !p.eliminated)
    },
    
    activePlayers() {
      return this.players.filter(p => !p.eliminated)
    }
  },
  
  methods: {
    // 初始化游戏
    initGame() {
      // 加载用户信息
      this.loadUserInfo()
      
      // 重置所有玩家
      this.players.forEach(player => {
        if (player.id === 1) {
          // 玩家使用用户信息
          player.name = this.userInfo.name || '玩家'
          player.avatar = this.userInfo.avatar || ''
          player.gold = 100 // 玩家默认金币
          console.log('设置玩家信息:', {
            name: player.name,
            avatar: player.avatar,
            gold: player.gold
          })
      } else {
          // AI玩家
          player.name = 'AI玩家'
          player.avatar = ''
          player.gold = 1000 // AI默认金币
        }
        player.reputation = 100
        player.rewards = 0
        player.eliminated = false
        player.hand = this.generateHand(5)
      })
      
      // 重置游戏状态
      this.currentRound = 1
      this.gamePhase = 'play'
      this.currentPlayerId = 1
      this.commonPot = 0
      this.playedCards = []
      this.selectedCards = []
      
      // 收取入场费
      this.collectEntryFee()
      
      uni.showToast({
        title: '游戏开始！',
        icon: 'success'
      })
    },
    
    // 加载用户信息
    loadUserInfo() {
      try {
        // 尝试从 currentUser 获取
        const currentUser = uni.getStorageSync('currentUser')
        if (currentUser) {
          const userData = JSON.parse(currentUser)
          this.userInfo = {
            name: userData.name || userData.username || '',
            avatar: userData.avatar || ''
          }
          console.log('从 currentUser 加载用户信息成功:', this.userInfo)
          return
        }
        
        // 尝试从 userInfo 获取
        const userInfo = uni.getStorageSync('userInfo')
        if (userInfo) {
          const userData = JSON.parse(userInfo)
        this.userInfo = {
            name: userData.name || userData.username || '',
            avatar: userData.avatar || ''
          }
          console.log('从 userInfo 加载用户信息成功:', this.userInfo)
          return
        }
        
        console.log('未找到用户信息，使用默认值')
      } catch (error) {
        console.log('加载用户信息失败:', error)
      }
    },
    
    // 收取入场费
    collectEntryFee() {
      this.players.forEach(player => {
        if (player.id === 1) {
          // 玩家收取入场费
          const fee = Math.min(this.entryFee, player.gold)
          player.gold -= fee
          this.commonPot += fee
        } else {
          // AI玩家不收取入场费，但参与公共金币池
          this.commonPot += this.entryFee
        }
      })
    },
    
    // 生成手牌
    generateHand(count) {
      const cards = []
      for (let i = 0; i < count; i++) {
        const isTrust = Math.random() < 0.5
        cards.push({
          type: isTrust ? 'trust' : 'deception',
          icon: isTrust ? '⚪' : '⚫',
          name: isTrust ? '信任' : '欺骗',
          id: `card_${Date.now()}_${i}`,
          revealed: false
        })
      }
      return cards
    },
    
    // 选择卡牌
    selectCard(index) {
      if (this.selectedCards.includes(index)) {
        this.selectedCards = this.selectedCards.filter(i => i !== index)
          } else {
        this.selectedCards.push(index)
      }
    },
    
    // 出牌
    playCards() {
      if (this.selectedCards.length === 0) {
        uni.showToast({
          title: '请选择要出的卡牌',
          icon: 'none'
        })
        return
      }
      
      // 将选中的卡牌加入已出卡牌
      this.selectedCards.forEach(index => {
        const card = this.currentPlayer.hand[index]
        this.playedCards.push(card)
      })
      
      // 从手牌中移除已出的卡牌
      this.selectedCards.forEach(index => {
        this.currentPlayer.hand.splice(index, 1)
      })
      
      this.selectedCards = []
      
      // AI也出牌（隐藏过程）
      this.aiPlayCard()
      
      // 直接进入投注阶段
      this.gamePhase = 'betting'
      this.initBetting()
    },
    
    // AI出牌
    aiPlayCard() {
      // AI出牌数量与玩家相同
      const playerCardCount = this.playedCards.length
      
      // AI随机生成卡牌（与玩家数量相同）
      for (let i = 0; i < playerCardCount; i++) {
        const isTrust = Math.random() < 0.5
        const card = {
          type: isTrust ? 'trust' : 'deception',
          icon: isTrust ? '⚪' : '⚫',
          name: isTrust ? '信任' : '欺骗',
          id: `ai_card_${Date.now()}_${i}`,
          revealed: false
        }
        this.aiPlayedCards.push(card)
      }
      
      console.log('AI出牌完成:', this.aiPlayedCards)
    },
    
    // 跳过回合
    passTurn() {
      this.nextPlayer()
    },
    
    // 初始化投注
    initBetting() {
      this.playerBets = {}
      this.betAmounts = {}
      // 只初始化当前玩家的投注
      this.playerBets[this.currentPlayerId] = false
      this.betAmounts[this.currentPlayerId] = 0
    },
    
    // 切换投注
    toggleBet(playerId) {
      this.playerBets[playerId] = !this.playerBets[playerId]
      if (!this.playerBets[playerId]) {
        this.betAmounts[playerId] = 0
      }
    },
    
    // 设置最大投注
    setMaxBet(playerId) {
      const player = this.players.find(p => p.id === playerId)
      this.betAmounts[playerId] = player.gold
    },
    
    // 设置快速投注
    setQuickBet(amount) {
      this.betAmounts[this.currentPlayerId] = amount
    },
    
    // 确认投注
    confirmBetting() {
      // 处理当前玩家的投注
      if (this.playerBets[this.currentPlayerId]) {
        const betAmount = Math.min(this.betAmounts[this.currentPlayerId] || 0, this.currentPlayer.gold)
        
        // 检查玩家是否有足够金币
        if (betAmount > this.currentPlayer.gold) {
          uni.showToast({
            title: '金币不足',
            icon: 'none'
          })
          return
        }
        
        this.currentPlayer.gold -= betAmount
        this.commonPot += betAmount
        
        uni.showToast({
          title: `投注 ${betAmount} 金币`,
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '跳过投注',
          icon: 'none'
        })
      }
      
      // 进入技能卡阶段
      this.gamePhase = 'skill'
      this.initSkillPhase()
    },
    
    // 跳过投注
    skipBetting() {
      this.gamePhase = 'skill'
      this.initSkillPhase()
    },
    
    // 初始化技能卡阶段
    initSkillPhase() {
      // 检查是否有可用技能卡
      const hasSkills = this.availableSkills.some(skill => 
        this.currentPlayer.gold >= skill.cost
      )
      
      if (!hasSkills) {
        this.gamePhase = 'challenge'
        this.initChallenge()
        return
      }
    },
    
    // 使用技能
    useSkill(skill) {
      if (this.currentPlayer.gold < skill.cost) {
            uni.showToast({
              title: '金币不足',
              icon: 'none'
            })
            return
          }
          
      this.currentPlayer.gold -= skill.cost
      
      // 执行技能效果
      this.executeSkill(skill)
      
      this.gamePhase = 'challenge'
      this.initChallenge()
    },
    
    // 跳过技能
    skipSkill() {
      this.gamePhase = 'challenge'
      this.initChallenge()
    },
    
    // 执行技能效果
    executeSkill(skill) {
      switch (skill.id) {
        case 'reveal':
            uni.showToast({
            title: '已查看对手手牌',
              icon: 'success'
            })
          break
        case 'protect':
            uni.showToast({
            title: '获得信任护盾',
            icon: 'success'
          })
          break
        case 'double':
        uni.showToast({
            title: '投注金额翻倍',
            icon: 'success'
          })
          break
      }
    },
    
    // 初始化质疑
    initChallenge() {
      this.challenges = {}
      this.otherPlayers.forEach(player => {
        this.challenges[player.id] = false
      })
    },
    
    // 切换质疑
    toggleChallenge(playerId) {
      this.challenges[playerId] = !this.challenges[playerId]
    },
    
    // 翻牌查看（真相之眼技能）
    revealCard(index) {
      if (!this.truthEyeUsed) {
        uni.showToast({
          title: '请先使用真相之眼技能',
          icon: 'none'
        })
        return
      }
      
      if (this.truthEyeRevealed) {
        uni.showToast({
          title: '真相之眼只能翻一张卡牌',
          icon: 'none'
        })
        return
      }
      
      if (this.aiPlayedCards[index]) {
        this.aiPlayedCards[index].revealed = true
        this.truthEyeRevealed = true
        uni.showToast({
          title: `真相之眼: ${this.aiPlayedCards[index].name}`,
          icon: 'success'
        })
      }
    },
    
    // 使用技能卡
    useSkill(skill) {
      if (this.currentPlayer.gold < skill.cost) {
        uni.showToast({
          title: '金币不足',
          icon: 'none'
        })
        return
      }
      
      this.currentPlayer.gold -= skill.cost
      
      if (skill.id === 'reveal') {
        // 真相之眼：选择查看对方的一张卡牌
        this.truthEyeUsed = true
        this.truthEyeRevealed = false
      uni.showModal({
          title: '真相之眼',
          content: '点击对方卡牌查看其中一张（只能翻一张）',
        showCancel: false,
          confirmText: '确定'
        })
      } else if (skill.id === 'protect') {
        // 信任护盾：保护自己不被质疑
        uni.showToast({
          title: '获得护盾保护',
          icon: 'success'
        })
      } else if (skill.id === 'double') {
        // 双倍投注：投注金额翻倍
        if (this.playerBets[this.currentPlayerId]) {
          this.betAmounts[this.currentPlayerId] *= 2
        }
        uni.showToast({
          title: '投注金额翻倍',
          icon: 'success'
        })
      }
      
      this.gamePhase = 'challenge'
      this.initChallenge()
    },
    
    // 结算质疑
    resolveChallenge() {
      const challengers = Object.keys(this.challenges).filter(id => this.challenges[id])
      
      if (challengers.length === 0) {
        // 无人质疑，检查双方是否都诚实
        const playerHonest = this.checkPlayerHonesty()
        const aiHonest = this.checkAIHonesty()
        
        if (playerHonest && aiHonest) {
          // 双方都诚实，奖励放入公共金币池
          this.resultMessage = '🎉 双方都诚实，奖励放入公共金币池！'
          this.addToCommonPot()
        } else if (playerHonest) {
          // 玩家诚实，玩家获得奖励
          this.resultMessage = '🎉 玩家诚实，获得奖励！'
          this.distributeRewardsToPlayer()
        } else {
          // AI诚实，AI获得奖励
          this.resultMessage = '🎉 AI诚实，获得奖励！'
          this.distributeRewardsToAI()
        }
      } else {
        // 玩家质疑AI，检查AI是否诚实
        const aiHonest = this.checkAIHonesty()
        
        if (aiHonest) {
          // AI诚实，玩家质疑失败
          this.resultMessage = '✅ AI诚实，质疑失败！'
          this.punishPlayer()
        } else {
          // AI欺骗，玩家质疑成功
          this.resultMessage = '🎭 AI欺骗，质疑成功！'
          this.rewardPlayer()
          this.punishAI()
        }
      }
      
      this.gamePhase = 'result'
    },
    
    // 检查AI诚实性
    checkAIHonesty() {
      // 如果AI的所有出牌都是信任卡，则诚实
      return this.aiPlayedCards.every(card => card.type === 'trust')
    },
    
    // 检查玩家诚实性
    checkPlayerHonesty() {
      // 如果玩家的所有出牌都是信任卡，则诚实
      return this.playedCards.every(card => card.type === 'trust')
    },
    
    // 奖励玩家（质疑成功）
    rewardPlayer() {
      // 计算基础奖励
      const baseReward = 30
      // 获取玩家投注金额
      const playerBet = this.betAmounts[1] || 0
      // 投注奖励：投注金额的1.5倍
      const betReward = Math.floor(playerBet * 1.5)
      // 总奖励 = 基础奖励 + 投注奖励
      const totalReward = baseReward + betReward
      
      // 从公共金币池中获得奖励
      const reward = Math.min(totalReward, this.commonPot)
      this.players[0].gold += reward
      this.players[0].rewards += reward
      this.commonPot -= reward
      
      if (this.commonPot === 0) {
        this.challengeResult = `💰 玩家获得 ${reward} 金币奖励（基础:${baseReward} + 投注:${betReward}）`
        // 公共金币池空了，给玩家额外补偿
        this.players[0].gold += 10
        this.players[0].rewards += 10
      } else {
        this.challengeResult = `💰 玩家获得 ${reward} 金币奖励（基础:${baseReward} + 投注:${betReward}）`
      }
    },
    
    // 惩罚玩家（质疑失败）
    punishPlayer() {
      this.players[0].reputation -= 10
      if (this.players[0].reputation <= 0) {
        this.players[0].eliminated = true
      }
      this.reputationChanges = '⭐ 玩家信誉点-10'
    },
    
    // 惩罚AI（被质疑成功）
    punishAI() {
      this.players[1].reputation -= 20
      if (this.players[1].reputation <= 0) {
        this.players[1].eliminated = true
      }
      this.reputationChanges = '⭐ AI信誉点-20'
    },
    
    // 奖励AI（无人质疑）
    distributeRewardsToAI() {
      // 从公共金币池中获得奖励
      const reward = Math.min(20, this.commonPot)
      this.players[1].gold += reward
      this.players[1].rewards += reward
      this.commonPot -= reward
      
      if (this.commonPot === 0) {
        this.challengeResult = `💰 AI获得 ${reward} 金币奖励（公共金币池已空）`
        // 公共金币池空了，给AI额外补偿
        this.players[1].gold += 5
        this.players[1].rewards += 5
      } else {
        this.challengeResult = `💰 AI从公共金币池获得 ${reward} 金币奖励`
      }
    },
    
    // 奖励玩家（无人质疑）
    distributeRewardsToPlayer() {
      // 计算基础奖励
      const baseReward = 20
      // 获取玩家投注金额
      const playerBet = this.betAmounts[1] || 0
      // 投注奖励：投注金额的1.2倍
      const betReward = Math.floor(playerBet * 1.2)
      // 总奖励 = 基础奖励 + 投注奖励
      const totalReward = baseReward + betReward
      
      // 从公共金币池中获得奖励
      const reward = Math.min(totalReward, this.commonPot)
      this.players[0].gold += reward
      this.players[0].rewards += reward
      this.commonPot -= reward
      
      if (this.commonPot === 0) {
        this.challengeResult = `💰 玩家获得 ${reward} 金币奖励（基础:${baseReward} + 投注:${betReward}）`
        // 公共金币池空了，给玩家额外补偿
        this.players[0].gold += 5
        this.players[0].rewards += 5
      } else {
        this.challengeResult = `💰 玩家获得 ${reward} 金币奖励（基础:${baseReward} + 投注:${betReward}）`
      }
    },
    
    // 双方平分奖励
    distributeRewardsToBoth() {
      this.players[0].gold += 10
      this.players[0].rewards += 10
      this.players[1].gold += 10
      this.players[1].rewards += 10
      this.challengeResult = '💰 双方各获得 10 金币奖励'
    },
    
    // 将奖励放入公共金币池
    addToCommonPot() {
      // 基础奖励
      const baseReward = 20
      // 获取玩家投注金额
      const playerBet = this.betAmounts[1] || 0
      // 投注奖励：投注金额的0.5倍（双方都诚实，投注奖励较少）
      const betReward = Math.floor(playerBet * 0.5)
      // 总奖励
      const totalReward = baseReward + betReward
      
      this.commonPot += totalReward
      this.challengeResult = `💰 ${totalReward}金币已加入公共金币池（基础:${baseReward} + 投注:${betReward}）`
    },
    
    // 奖励质疑者
    rewardChallengers(challengers) {
      const rewardPerChallenger = Math.floor(30 / challengers.length)
      challengers.forEach(id => {
        const player = this.players.find(p => p.id == id)
        player.gold += rewardPerChallenger
        player.rewards += rewardPerChallenger
      })
      this.challengeResult = `💰 质疑者获得 ${rewardPerChallenger} 金币奖励`
    },
    
    // 惩罚质疑者（质疑失败）
    punishChallengers(challengers) {
      challengers.forEach(id => {
        const player = this.players.find(p => p.id == id)
        player.reputation -= 10
        if (player.reputation <= 0) {
          player.eliminated = true
        }
      })
      this.challengeResult = '⭐ 质疑者信誉点-10'
    },
    
    // 惩罚欺骗者（被质疑成功）
    punishCheater() {
      this.currentPlayer.reputation -= 20
      if (this.currentPlayer.reputation <= 0) {
        this.currentPlayer.eliminated = true
      }
      this.reputationChanges = `⭐ ${this.currentPlayer.name} 信誉点-20`
    },
    
    // 分配奖励
    distributeRewards() {
      this.currentPlayer.gold += 20
      this.currentPlayer.rewards += 20
      this.challengeResult = '💰 出牌玩家获得 20 金币奖励'
    },
    
    // 下一轮
    nextRound() {
      this.currentRound++
      this.playedCards = []
      this.aiPlayedCards = []
      this.selectedCards = []
      
      // 重置投注数据
      this.playerBets = {}
      this.betAmounts = {}
      
      // 重置技能状态
      this.truthEyeUsed = false
      this.truthEyeRevealed = false
      
      if (this.currentRound > this.maxRounds || this.activePlayers.length <= 1) {
        this.endGame()
      } else {
        // 重新生成所有玩家的手牌
        this.players.forEach(player => {
          if (!player.eliminated) {
            player.hand = this.generateHand(5)
          }
        })
        
        this.nextPlayer()
        this.gamePhase = 'play'
        
      uni.showToast({
          title: `第${this.currentRound}轮开始`,
        icon: 'success'
      })
      }
    },
    
    // 下一个玩家
    nextPlayer() {
      const activePlayerIds = this.activePlayers.map(p => p.id)
      const currentIndex = activePlayerIds.indexOf(this.currentPlayerId)
      const nextIndex = (currentIndex + 1) % activePlayerIds.length
      this.currentPlayerId = activePlayerIds[nextIndex]
    },
    
    // 结束游戏
    endGame() {
      // 分配公共金币池
      this.distributeCommonPot()
      
      this.finalRanking = [...this.players]
        .filter(p => !p.eliminated)
        .sort((a, b) => b.gold - a.gold)
      
      this.gamePhase = 'ended'
    },
    
    // 分配公共金币池
    distributeCommonPot() {
      if (this.commonPot > 0) {
        const activePlayers = this.players.filter(p => !p.eliminated)
        if (activePlayers.length > 0) {
          const rewardPerPlayer = Math.floor(this.commonPot / activePlayers.length)
          activePlayers.forEach(player => {
            player.gold += rewardPerPlayer
            player.rewards += rewardPerPlayer
          })
          
          // 清空公共金币池
          this.commonPot = 0
        }
      } else {
        // 公共金币池为空，给所有玩家小额补偿
        const activePlayers = this.players.filter(p => !p.eliminated)
        activePlayers.forEach(player => {
          player.gold += 5
          player.rewards += 5
        })
      }
    },
    
    // 检查公共金币池状态
    checkCommonPotStatus() {
      if (this.commonPot <= 0) {
        uni.showToast({
          title: '公共金币池已空',
          icon: 'none'
        })
        return false
      }
      return true
    },
    
    // 重新开始
    restartGame() {
      this.initGame()
    },
    
    // 获取阶段文本
    getPhaseText() {
      const phaseTexts = {
        'play': '出牌阶段',
        'betting': '投注阶段',
        'skill': '技能卡阶段',
        'challenge': '质疑阶段',
        'result': '结果阶段',
        'ended': '游戏结束'
      }
      return phaseTexts[this.gamePhase] || '未知阶段'
    },
    
    // 获取已出卡牌文本
    getPlayedCardsText() {
      if (this.playedCards.length === 0) return '无'
      return this.playedCards.map(card => card.name).join('、')
    },
    
    // 处理头像错误
    handleAvatarError() {
      console.log('头像加载失败，使用默认头像')
    },

    // 跳转到兑换页面
    goToExchange() {
      uni.navigateTo({
        url: '/pages/game/trust-fall/index'
      })
    }
  },
  
  onLoad() {
    this.initGame()
  }
}
</script>

<style scoped>
.black-white-card-game {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 10rpx;
}

.game-header {
  text-align: center;
  margin-bottom: 15rpx;
}

.game-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 6rpx;
}

.game-subtitle {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.game-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15rpx;
  padding: 12rpx 15rpx;
  margin-bottom: 15rpx;
  backdrop-filter: blur(10rpx);
}

.round-info {
  display: flex;
  flex-direction: column;
}

.round-text {
  font-size: 26rpx;
  font-weight: bold;
  color: white;
}

.phase-text {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.8);
}

.common-pot {
  text-align: center;
}

.pot-label {
  display: block;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.8);
}

.pot-amount {
  display: block;
  font-size: 26rpx;
  font-weight: bold;
  color: #ffd700;
}

.pot-desc {
  display: block;
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 5rpx;
}

.players-area {
  display: flex;
  gap: 12rpx;
  margin-bottom: 15rpx;
}

.player-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15rpx;
  padding: 12rpx;
  position: relative;
  transition: all 0.3s ease;
}

.player-card.current-player {
  border: 4rpx solid #4cd964;
  box-shadow: 0 0 20rpx rgba(76, 217, 100, 0.5);
}

.player-card.eliminated {
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.5);
}

.player-header {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.player-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 8rpx;
}

.default-avatar {
  background: linear-gradient(135deg, #4cd964, #2ecc71);
  display: flex;
  align-items: center;
  justify-content: center;
}

.default-avatar-text {
  color: white;
  font-size: 18rpx;
  font-weight: bold;
}

.player-name {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.current-indicator {
  font-size: 16rpx;
  color: #4cd964;
  background: rgba(76, 217, 100, 0.1);
  padding: 2rpx 6rpx;
  border-radius: 8rpx;
}

.player-stats {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.stat-icon {
  font-size: 18rpx;
  margin-bottom: 3rpx;
}

.stat-value {
  font-size: 16rpx;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 12rpx;
  color: #666;
  margin-top: 1rpx;
}

.eliminated-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eliminated-text {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
}

.game-main-area {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;
}

.phase-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 15rpx;
}

.current-player-info {
  text-align: center;
  margin-bottom: 15rpx;
}

.hand-count {
  font-size: 20rpx;
  color: #666;
}

.hand-area {
  margin-bottom: 15rpx;
}

.hand-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
  text-align: center;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  justify-content: center;
}

.card-item {
  width: 80rpx;
  height: 100rpx;
  background: white;
  border: 2rpx solid #ddd;
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.card-item.selected {
  border-color: #4cd964;
  background: rgba(76, 217, 100, 0.1);
  transform: scale(1.05);
}

.card-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.card-name {
  font-size: 20rpx;
  color: #333;
  text-align: center;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  justify-content: center;
}

.action-btn {
  padding: 20rpx 40rpx;
  border-radius: 25rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: #4cd964;
  color: white;
}

.action-btn.primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.action-btn.secondary {
  background: #f0f0f0;
  color: #333;
}

.betting-info {
  margin-bottom: 30rpx;
  text-align: center;
}

.played-cards-text {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.betting-desc {
  display: block;
  font-size: 20rpx;
  color: #999;
}

.player-betting {
  background: #f8f9fa;
  border-radius: 15rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.betting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.betting-controls {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.bet-toggle-section {
  text-align: center;
}

.bet-amount-section {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.amount-label {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.amount-controls {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.bet-input {
  flex: 1;
  height: 60rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 0 15rpx;
  font-size: 24rpx;
}

.bet-max-btn {
  padding: 10rpx 20rpx;
  background: #4cd964;
  color: white;
  border: none;
  border-radius: 10rpx;
  font-size: 20rpx;
}

.quick-amounts {
  display: flex;
  gap: 10rpx;
  justify-content: center;
}

.quick-amount-btn {
  padding: 8rpx 16rpx;
  background: #e9ecef;
  color: #333;
  border: none;
  border-radius: 8rpx;
  font-size: 20rpx;
}

.quick-amount-btn:active {
  background: #4cd964;
  color: white;
}

.challenge-options {
  margin-bottom: 30rpx;
}

.challenge-option {
  background: #f8f9fa;
  border-radius: 15rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
}

.player-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.challenge-actions {
  display: flex;
  gap: 15rpx;
  justify-content: flex-end;
}

.view-hand-btn {
  padding: 10rpx 20rpx;
  border-radius: 15rpx;
  font-size: 24rpx;
  background: #e9ecef;
  color: #333;
  border: none;
  cursor: pointer;
}

.view-hand-btn:active {
  background: #4cd964;
  color: white;
}

.player-bet-info {
  display: flex;
  flex-direction: column;
}

.player-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.player-gold {
  font-size: 24rpx;
  color: #666;
}

.bet-controls {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.bet-toggle-btn {
  padding: 10rpx 20rpx;
  border-radius: 15rpx;
  font-size: 24rpx;
  background: #e9ecef;
  color: #333;
  border: none;
  cursor: pointer;
}

.bet-toggle-btn.active {
  background: #4cd964;
  color: white;
}

.bet-amount-control {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.bet-input {
  width: 120rpx;
  height: 60rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 0 10rpx;
  font-size: 24rpx;
}

.bet-max {
  font-size: 20rpx;
  color: #4cd964;
  cursor: pointer;
}

.challenge-btn {
  padding: 10rpx 20rpx;
  border-radius: 15rpx;
  font-size: 24rpx;
  background: #e9ecef;
  color: #333;
  border: none;
  cursor: pointer;
}

.challenge-btn.active {
  background: #ff3b30;
  color: white;
}

.skill-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-bottom: 30rpx;
}

.skill-card {
  flex: 1;
  min-width: 200rpx;
  background: #f8f9fa;
  border: 2rpx solid #ddd;
  border-radius: 15rpx;
  padding: 20rpx;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.skill-card:hover {
  border-color: #4cd964;
  background: rgba(76, 217, 100, 0.1);
}

.skill-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 10rpx;
}

.skill-name {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.skill-desc {
  font-size: 20rpx;
  color: #666;
  display: block;
}

.result-phase, .end-phase {
  text-align: center;
}

.result-title, .end-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.result-summary {
  margin-bottom: 30rpx;
}

.result-main {
  background: #4cd964;
  color: white;
  padding: 30rpx;
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.result-message {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  display: block;
}

.result-detail {
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 15rpx;
  margin-bottom: 15rpx;
  text-align: center;
}

.detail-text {
  font-size: 26rpx;
  color: #333;
  display: block;
}

.result-stats {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
  margin-bottom: 30rpx;
}

.stat-card {
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 15rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
    font-size: 24rpx;
  color: #666 !important;
}

.stat-value {
    font-size: 24rpx;
  font-weight: bold;
  color: #333 !important;
}

.final-ranking {
  margin-bottom: 30rpx;
}

.ranking-title {
    font-size: 32rpx;
  font-weight: bold;
  color: #333;
    margin-bottom: 20rpx;
    display: block;
}

.ranking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}

.rank {
  font-size: 24rpx;
  font-weight: bold;
  color: #4cd964;
}

.played-cards {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 20rpx;
}

.played-cards-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
  text-align: center;
}

.played-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  justify-content: center;
}

.played-card {
  width: 80rpx;
  height: 100rpx;
  background: white;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.played-card .card-icon {
  font-size: 32rpx;
  margin-bottom: 5rpx;
}

.played-card .card-name {
  font-size: 16rpx;
  color: #333;
  text-align: center;
}

/* 已出卡牌信息样式 */
.played-cards-info {
  margin-bottom: 15rpx;
}

.player-label {
  font-size: 20rpx;
  color: #666;
  background: #e9ecef;
  padding: 5rpx 10rpx;
  border-radius: 8rpx;
  display: inline-block;
}

/* 对方卡牌显示样式 */
.opponent-cards {
  background: #fff3cd;
  border: 2rpx solid #ffc107;
  border-radius: 15rpx;
  padding: 20rpx;
  margin: 20rpx 0;
}

.opponent-cards-title {
  font-size: 24rpx;
  color: #856404;
  font-weight: bold;
  margin-bottom: 15rpx;
  display: block;
}

.opponent-cards-container {
  display: flex;
  gap: 15rpx;
  flex-wrap: wrap;
}

.opponent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx;
  background: white;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
  min-width: 80rpx;
  border: 2rpx solid #ffc107;
  cursor: pointer;
  transition: all 0.3s ease;
}

.opponent-card:not(.revealed) {
  background: #6c757d;
  color: white;
}

.opponent-card.revealed {
  background: white;
  color: #333;
  border-color: #28a745;
}

.card-back {
  font-size: 32rpx;
  font-weight: bold;
  color: white;
}

.opponent-card.revealed .card-back {
  display: none;
}

.opponent-card:not(.revealed) .card-icon {
  display: none;
}

.opponent-card.clickable {
  cursor: pointer;
  border-color: #ffc107;
  box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.3);
}

.opponent-card.clickable:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(255, 193, 7, 0.4);
}

.ai-cards-info {
  display: block;
  font-size: 20rpx;
  color: #666;
  margin-top: 10rpx;
}

/* 结算页面卡牌显示样式 */
.played-cards-summary {
  margin: 30rpx 0;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.player-cards-section, .ai-cards-section {
  background: #f8f9fa;
  border-radius: 15rpx;
  padding: 20rpx;
}

.cards-section-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #333 !important;
  margin-bottom: 15rpx;
  display: block;
}

.cards-display {
  display: flex;
  gap: 15rpx;
  flex-wrap: wrap;
}

.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15rpx;
  background: white;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
  min-width: 80rpx;
}

.result-card .card-icon {
  font-size: 32rpx;
  margin-bottom: 5rpx;
}

.result-card .card-name {
  font-size: 20rpx;
  color: #333 !important;
  text-align: center;
}

/* 移动端优化 */
@media screen and (max-width: 750rpx) {
  .black-white-card-game {
    padding: 8rpx;
  }
  
  .game-header {
    margin-bottom: 10rpx;
  }
  
  .game-title {
    font-size: 32rpx;
    margin-bottom: 4rpx;
  }
  
  .game-subtitle {
    font-size: 24rpx;
  }
  
  .game-status {
    padding: 8rpx 12rpx;
    margin-bottom: 10rpx;
    flex-direction: column;
    gap: 8rpx;
    align-items: flex-start;
  }
  
  .round-info {
    align-self: flex-start;
  }
  
  .common-pot {
    align-self: flex-end;
    text-align: right;
  }
  
  .round-text {
    font-size: 22rpx;
  }
  
  .phase-text {
    font-size: 18rpx;
  }
  
  .pot-label {
    font-size: 18rpx;
  }
  
  .pot-amount {
    font-size: 22rpx;
  }
  
  .pot-desc {
    font-size: 14rpx;
  }
  
  .players-area {
    gap: 8rpx;
    margin-bottom: 10rpx;
    flex-direction: column;
  }
  
  .player-card {
    padding: 8rpx;
    border-radius: 12rpx;
  }
  
  .player-header {
    margin-bottom: 6rpx;
  }
  
  .player-avatar {
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
  }
  
  .default-avatar-text {
    font-size: 14rpx;
  }
  
  .player-name {
    font-size: 18rpx;
  }
  
  .current-indicator {
    font-size: 14rpx;
    padding: 1rpx 4rpx;
  }
  
  .stat-icon {
    font-size: 16rpx;
    margin-bottom: 2rpx;
  }
  
  .stat-value {
    font-size: 14rpx;
  }
  
  .stat-label {
    font-size: 10rpx;
  }
  
  .game-main-area {
    padding: 12rpx;
    margin-bottom: 10rpx;
  }
  
  .phase-title {
    font-size: 24rpx;
    margin-bottom: 10rpx;
  }
  
  .current-player-info {
    margin-bottom: 10rpx;
  }
  
  .hand-count {
    font-size: 18rpx;
  }
  
  .hand-area {
    margin-bottom: 10rpx;
  }
  
  .hand-title {
    font-size: 20rpx;
    margin-bottom: 8rpx;
  }
  
  .cards-container {
    gap: 6rpx;
  }
  
  .card-item {
    width: 60rpx;
    height: 75rpx;
    border-radius: 8rpx;
  }
  
  .card-icon {
    font-size: 20rpx;
    margin-bottom: 2rpx;
  }
  
  .card-name {
    font-size: 10rpx;
  }
  
  .action-buttons {
    margin-top: 10rpx;
    gap: 8rpx;
  }
  
  .action-btn {
    padding: 8rpx 12rpx;
    font-size: 16rpx;
    border-radius: 8rpx;
  }
  
  .betting-area {
    padding: 12rpx;
    margin-bottom: 10rpx;
  }
  
  .betting-title {
    font-size: 20rpx;
    margin-bottom: 8rpx;
  }
  
  .betting-controls {
    gap: 6rpx;
    margin-bottom: 8rpx;
  }
  
  .bet-input {
    width: 80rpx;
    padding: 6rpx;
    font-size: 16rpx;
  }
  
  .bet-btn {
    padding: 6rpx 10rpx;
    font-size: 14rpx;
  }
  
  .quick-bet-buttons {
    gap: 6rpx;
  }
  
  .quick-bet-btn {
    padding: 6rpx 8rpx;
    font-size: 14rpx;
  }
  
  .skill-area {
    padding: 12rpx;
    margin-bottom: 10rpx;
  }
  
  .skill-title {
    font-size: 20rpx;
    margin-bottom: 8rpx;
  }
  
  .skill-cards {
    gap: 8rpx;
  }
  
  .skill-card {
    padding: 8rpx;
    border-radius: 8rpx;
  }
  
  .skill-icon {
    font-size: 20rpx;
    margin-bottom: 4rpx;
  }
  
  .skill-name {
    font-size: 12rpx;
    margin-bottom: 2rpx;
  }
  
  .skill-desc {
    font-size: 10rpx;
  }
  
  .challenge-area {
    padding: 12rpx;
    margin-bottom: 10rpx;
  }
  
  .challenge-title {
    font-size: 20rpx;
    margin-bottom: 8rpx;
  }
  
  .challenge-buttons {
    gap: 8rpx;
  }
  
  .challenge-btn {
    padding: 8rpx 12rpx;
    font-size: 16rpx;
  }
  
  .result-area {
    padding: 12rpx;
    margin-bottom: 10rpx;
  }
  
  .result-title {
    font-size: 20rpx;
    margin-bottom: 8rpx;
  }
  
  .result-info {
    font-size: 16rpx;
    margin-bottom: 8rpx;
  }
  
  .next-round-btn {
    padding: 8rpx 16rpx;
    font-size: 16rpx;
  }
  
  .final-ranking {
    margin-bottom: 20rpx;
  }
  
  .ranking-title {
    font-size: 24rpx;
    margin-bottom: 12rpx;
  }
  
  .ranking-item {
    padding: 10rpx;
    margin-bottom: 6rpx;
  }
  
  .rank {
    font-size: 18rpx;
  }
  
  .played-cards {
    padding: 12rpx;
    margin-bottom: 10rpx;
  }
  
  .played-cards-title {
    font-size: 20rpx;
    margin-bottom: 8rpx;
  }
  
  .played-cards-container {
    gap: 6rpx;
  }
  
  .played-card {
    width: 50rpx;
    height: 60rpx;
    border-radius: 6rpx;
  }
  
  .played-card .card-icon {
    font-size: 20rpx;
    margin-bottom: 2rpx;
  }
  
  .played-card .card-name {
    font-size: 10rpx;
  }
}

/* 兑换弹窗样式 */
.exchange-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.exchange-modal .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.exchange-modal .modal-content {
  position: relative;
  background: white;
  border-radius: 20rpx;
  width: 90%;
  max-width: 500rpx;
  max-height: 70%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
}

.exchange-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.exchange-modal .modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.exchange-modal .modal-close {
  font-size: 40rpx;
  color: #999;
  font-weight: bold;
  cursor: pointer;
}

.exchange-modal .modal-body {
  padding: 30rpx;
  overflow-y: auto;
  flex: 1;
}

.exchange-option {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 15rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 15rpx;
  transition: background 0.3s ease;
  cursor: pointer;
}

.exchange-option:active {
  background: #e0e0e0;
}

.exchange-option .option-icon {
  font-size: 50rpx;
  margin-right: 20rpx;
}

.exchange-option .option-content {
  flex: 1;
}

.exchange-option .option-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.exchange-option .option-desc {
  display: block;
  font-size: 22rpx;
  color: #666;
}


/* 游戏头部兑换按钮样式 */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.exchange-btn {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  cursor: pointer;
  transition: background 0.3s ease;
}

.exchange-btn:active {
  background: rgba(255, 255, 255, 0.2);
}

.exchange-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.exchange-text {
  font-size: 24rpx;
  color: white;
}
</style>